<template>
    <div class="wrapper">
        <head-bar></head-bar>
        <side-bar></side-bar>
        <div class="content">
            <transition name="fade" mode="out-in">
                <router-view />
            </transition>
        </div>
    </div>
</template>

<script>
    import headBar from './headBar';
    import sideBar from './sideBar';
    export default {
        components: {
            headBar,
            sideBar
        }
    }
</script>
<style>
    .content {
        position: relative;
        height: calc(100% - 80px);
        width: calc(100% - 290px);
        top: 80px;
        left: 290px;
        background-color: #f5f5f5;
    }
    .fade-enter {
        opacity: 0;
    }
    .fade-leave {
        opacity: 1;
    }
    .fade-enter-active {
        transition: opacity .5s;
    }
    .fade-leave-active {
        opacity: 0;
        transition: opacity .5s;
    }
</style>
